<template>
    <div>
      日历组件
      <YearCalendar
        v-model="date"
        :activeDates.sync="activeDates"
        @toggleDate="toggleDate"
        lang="zh"
        :activeClass="activeClass"
      ></YearCalendar>
      <!--<el-calendar v-model="date">
      </el-calendar>-->
    </div>
</template>

<script>
  import YearCalendar from 'vue-material-year-calendar'
  export default {
    name: "calendar",
    components: {
      YearCalendar
    },
    props: {
      date:{
        type: String,
        default: ''
      }
    },
    data() {
      return {
        activeClass: '', // 自定义的class
        activeDates: [], // 选中的日期

      }
    },
    watch: {
      date(nVal, oVal) {
        console.log(nVal)
      }
    },
    methods: {
      /**
       * @description: 点击选中的日期
       * @author: 书童
       */
      toggleDate (dateInfo) {
        console.log('选中的日期', dateInfo)
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
